<template>
<Detail
  ref="detail"
  :config = "config"
  :buttons="buttons"
  :enums="enums"
  :form="form"
  :dialogConfig="dialogConfig"
>
</Detail>
</template>
<script setup>
import Detail from '@/components/Detail/Detail.vue';
import { ElMessage } from 'element-plus';
import { useRouter } from 'vue-router';
import { ref, onMounted } from 'vue';
import axios from 'axios';
import cyber from '../../lib/cybercloud';
// 组件的 ref
const detail = ref(null);
const router = useRouter();
const config = ref({
  objectId: '',
  id: '',
  initData: false, // 是否直接触发 获取详情
  code: '', // 对象code
  name: '详情页名称自定义修改', // 标题的名称
  activeName: 'details', // tabs 默认选择
});
const buttons = ref([
  {
    name: '返回',
    action: 'back',
    icon: false,
    type: 'default',
    backPath: '', // 返回路径
  },
  {
    name: '编辑',
    action: 'update',
    icon: false,
    type: 'default',
  },
]);
// 枚举
const enums = ref({
});
// 展示的表单
const form = ref({
  data: [
    {
      label: '详情',
      name: 'details',
      config: {
        formRef: 'content',
        rules: {},
        formData: {},
      },
      groups: [
        {
          name: '数据',
          items: [
            {
              code: 'code',
              value: '',
              span: 3,
              name: '库位：',
              conversionEnums: {
                need: false,
                enumName: '',
              },
              rules: {
                rulesName: [
                  {
                    required: true,
                    message: '',
                    trigger: 'blur',
                  },
                ],
              },
            },
            {
              code: 'zoneId',
              value: '',
              span: 3,
              name: '库区：',
              conversionEnums: {
                need: false,
                enumName: '',
              },
              rules: {
                rulesName: [
                  {
                    required: true,
                    message: '',
                    trigger: 'blur',
                  },
                ],
              },
            },
            {
              code: 'status',
              value: '',
              span: 3,
              name: '状态：',
              conversionEnums: {
                need: true,
                enumName: 'status',
              },
              rules: {
                rulesName: [
                  {
                    required: true,
                    message: '',
                    trigger: 'blur',
                  },
                ],
              },
            },
            {
              code: 'locationTypeId',
              value: '',
              span: 3,
              name: '库位类型：',
              conversionEnums: {
                need: false,
                enumName: '',
              },
              rules: {
                rulesName: [
                  {
                    required: true,
                    message: '',
                    trigger: 'blur',
                  },
                ],
              },
            },
            {
              code: 'locationClass',
              value: '',
              span: 3,
              name: '库位种类：',
              conversionEnums: {
                need: true,
                enumName: 'locationClass',
              },
              rules: {
                rulesName: [
                  {
                    required: true,
                    message: '',
                    trigger: 'blur',
                  },
                ],
              },
            },
            {
              code: 'operationType',
              value: '',
              span: 3,
              name: '作业类型：',
              conversionEnums: {
                need: true,
                enumName: 'operationType',
              },
              rules: {
                rulesName: [
                  {
                    required: true,
                    message: '',
                    trigger: 'blur',
                  },
                ],
              },
            },
            {
              code: 'allowStatusChange',
              value: '',
              span: 3,
              name: '允许调整状态：',
              conversionEnums: {
                need: true,
                enumName: 'YES_NO',
              },
              rules: {
                rulesName: [],
              },
            },
            {
              code: 'trackLpn',
              value: '',
              span: 3,
              name: '记录托盘：',
              conversionEnums: {
                need: true,
                enumName: 'YES_NO',
              },
              rules: {
                rulesName: [],
              },
            },
            {
              code: 'maxLpns',
              value: '',
              span: 3,
              name: '最大托盘数：',
              conversionEnums: {
                need: false,
                enumName: '',
              },
              rules: {
                rulesName: [],
              },
            },
            {
              code: 'maxSkus',
              value: '',
              span: 3,
              name: '最大混品数：',
              conversionEnums: {
                need: false,
                enumName: '',
              },
              rules: {
                rulesName: [],
              },
            },
            {
              code: 'maxLots',
              value: '',
              span: 3,
              name: '最大混批号数：',
              conversionEnums: {
                need: false,
                enumName: '',
              },
              rules: {
                rulesName: [],
              },
            },
            {
              code: 'checkDigit',
              value: '',
              span: 3,
              name: '校验码：',
              conversionEnums: {
                need: false,
                enumName: '',
              },
              rules: {
                rulesName: [],
              },
            },
            {
              code: 'ingoreCapacity',
              value: '',
              span: 3,
              name: '忽略容量：',
              conversionEnums: {
                need: true,
                enumName: 'YES_NO',
              },
              rules: {
                rulesName: [],
              },
            },
            {
              code: 'rplnIngoreCapacity',
              value: '',
              span: 2,
              name: '补货忽略容量：',
              conversionEnums: {
                need: true,
                enumName: 'YES_NO',
              },
              rules: {
                rulesName: [],
              },
            },
            {
              code: 'operationSeq',
              value: '',
              span: 3,
              name: '作业顺序：',
              conversionEnums: {
                need: false,
                enumName: '',
              },
              rules: {
                rulesName: [],
              },
            },
            {
              code: 'cycleCountSeq',
              value: '',
              span: 2,
              name: '盘点顺序：',
              conversionEnums: {
                need: false,
                enumName: '',
              },
              rules: {
                rulesName: [],
              },
            },
            {
              code: 'floor',
              value: '',
              span: 3,
              name: '楼层：',
              conversionEnums: {
                need: true,
                enumName: 'floor',
              },
              rules: {
                rulesName: [],
              },
            },
            {
              code: 'aisleId',
              value: '',
              span: 2,
              name: '巷道：',
              conversionEnums: {
                need: false,
                enumName: '',
              },
              rules: {
                rulesName: [],
              },
            },
            {
              code: 'row',
              value: '',
              span: 3,
              name: '排：',
              conversionEnums: {
                need: false,
                enumName: '',
              },
              rules: {
                rulesName: [],
              },
            },
            {
              code: 'col',
              value: '',
              span: 3,
              name: '列：',
              conversionEnums: {
                need: false,
                enumName: '',
              },
              rules: {
                rulesName: [],
              },
            },
            {
              code: 'tier',
              value: '',
              span: 3,
              name: '层：',
              conversionEnums: {
                need: false,
                enumName: '',
              },
              rules: {
                rulesName: [],
              },
            },
            {
              code: 'lastUpdatedBy',
              value: '',
              span: 3,
              name: '修改人：',
              conversionEnums: {
                need: false,
                enumName: '',
              },
              rules: {
                rulesName: [],
              },
            },
            {
              code: 'lastUpdated',
              value: '',
              span: 2,
              name: '修改时间：',
              conversionEnums: {
                need: false,
                enumName: '',
              },
              rules: {
                rulesName: [],
              },
            },
            {
              code: 'createdBy',
              value: '',
              span: 3,
              name: '创建人：',
              conversionEnums: {
                need: false,
                enumName: '',
              },
              rules: {
                rulesName: [],
              },
            },
            {
              code: 'created',
              value: '',
              span: 2,
              name: '创建时间：',
              conversionEnums: {
                need: false,
                enumName: '',
              },
              rules: {
                rulesName: [],
              },
            },
          ],
        },
      ],
    },
  ],
});
// 更新表单
const dialogConfig = ref({
  title: '修改',
  options: {
    'close-on-press-escape': false,
    'close-on-click-modal': false,
    'show-close': false,
    width: '80%',
  },
  rules: {},
  formRef: 'update', // 表单的ref
  formData: {
    details: [{
      name: '', // form表单分成多个 模块显示，name作为模块名称
      items: [
        {
          span: 1,
          code: 'id', // 传递数据参数
          show: false, // 是否展示
          post: true, // 是否作为参数
          value: '', // 值
          name: 'id', // 字段名称
          type: 'input', // input 输入框 selectRemote 远程调用的筛选框
          conversionJson: {
            need: false, // true：字段为关联关系对象
          },
          options: { // element组件相关属性
            placeholder: '',
            readonly: true,
            loading: false,
            style: {
              width: '250px',
            },
          },
          rules: {
            rulesName: [],
          },
        },
        {
          span: 3,
          code: 'code', // 传递数据参数
          show: true, // 是否展示
          post: true, // 是否作为参数
          value: '', // 值
          name: '库位', // 字段名称
          prop: 'code', // rule prop
          type: 'input', // input 输入框 selectRemote 远程调用的筛选框

          options: { // element组件相关属性
            placeholder: '请输入库位',
            readonly: true,
            loading: false,
            style: {
              width: '250px',
            },
          },
          rules: {
            rulesName: [
              {
                required: true,
                message: '请输入库位',
                trigger: 'blur',
              },
            ],
          },
        },
        {
          span: 3,
          code: 'zoneId',
          show: true,
          post: true,
          value: '',
          name: '库区',
          prop: 'zoneId',
          type: 'selectRemote',
          selectRemote: {
            method: 'POST',
            url: 'api/app/corm/list',
            params: {
              objectId: 'zone',
              fields: ['id', 'code', 'name'],
              offset: 0,
              pageSize: 20,
              filters: [
                {
                  code: 'code',
                  id: 'zone.code',
                  operator: 'like',
                  value: '',
                },
                {
                  code: 'status',
                  id: 'zone.status',
                  operator: 'eq',
                  value: 'ENABLE',
                },
              ], // 过滤参数，远程搜索必须输入一个对象，query值会默认输入到第一个对象
            },
            optionsData: {
              attribute: {
                value: 'id', // 返回数据所需字段名称
                label: 'name',
                code: 'code',
              },
              data: [],
            },
          }, // selectRemote 远程调用属性配置
          rules: {
            rulesName: [
              {
                required: true,
                message: '请输入搜索选择库区',
                trigger: 'change',
              },
            ],
          },
          options: {
            readonly: false,
            placeholder: '请选择库区',
            style: {
              width: '250px',
            },
          },
        },
        {
          span: 3,
          code: 'status', // 传递数据参数
          show: true, // 是否展示
          post: true, // 是否作为参数
          value: '', // 值  状态此处设置默认值
          name: '状态', // 字段名称
          type: 'select',
          enumsName: 'status',
          options: { // element组件相关属性
            placeholder: '请输入状态',
            readonly: true,
            clearable: false,
            style: {
              width: '250px',
            },
          },

          rules: { rulesName: [] },
        },
        {
          span: 3,
          code: 'locationTypeId',
          show: true,
          post: true,
          value: '',
          name: '库位类型',
          prop: 'locationTypeId',
          type: 'selectRemote',
          selectRemote: {
            method: 'POST',
            url: 'api/app/corm/list',
            params: {
              objectId: 'locationType',
              fields: ['id', 'code', 'name'],
              offset: 0,
              pageSize: 20,
              filters: [
                {
                  code: 'code',
                  id: 'locationType.code',
                  operator: 'like',
                  value: '',
                },
                {
                  code: 'status',
                  id: 'locationType.status',
                  operator: 'eq',
                  value: 'ENABLE',
                },
              ], // 过滤参数，远程搜索必须输入一个对象，query值会默认输入到第一个对象
            },
            optionsData: {
              attribute: {
                value: 'id', // 返回数据所需字段名称
                label: 'name',
                code: 'code',
              },
              data: [],
            },
          }, // selectRemote 远程调用属性配置
          rules: {
            rulesName: [
              {
                required: true,
                message: '请输入搜索选择库位类型',
                trigger: 'change',
              },
            ],
          },
          options: {
            readonly: false,
            placeholder: '请选择库位类型',
            style: {
              width: '250px',
            },
          },

        },
        {
          span: 3,
          code: 'locationClass',
          show: true, // 是否展示
          post: true,
          name: '库位种类',
          value: '',
          type: 'select',
          enumsName: 'locationClass',
          options: {
            placeholder: '请选择库位种类',
            readonly: false,
            loading: false,
            clearable: true,
            style: {
              width: '250px',
            },
          },

          rules: {
            rulesName: [
              {
                required: true,
                message: '请输入库位种类',
                trigger: 'change',
              },
            ],
          },
        },
        {
          span: 3,
          code: 'operationType',
          show: true, // 是否展示
          post: true,
          name: '作业类型',
          value: '',
          type: 'select',

          enumsName: 'operationType',
          options: {
            placeholder: '请选择作业类型',
            readonly: false,
            loading: false,
            clearable: true,
            style: {
              width: '250px',
            },
          },
          rules: {
            rulesName: [
              {
                required: true,
                message: '请输入作业类型',
                trigger: 'change',
              },
            ],
          },
        },
        {
          span: 3,
          code: 'allowStatusChange', // 传递数据参数
          show: true, // 是否展示
          post: true, // 是否作为参数
          value: '', // 值  状态此处设置默认值
          name: '允许调整状态', // 字段名称
          type: 'select',

          enumsName: 'YES_NO',
          options: { // element组件相关属性
            placeholder: '请输入允许调整状态',
            readonly: false,
            clearable: false,
            style: {
              width: '250px',
            },
          },
          rules: { rulesName: [] },
        },
        {
          span: 3,
          code: 'trackLpn', // 传递数据参数
          show: true, // 是否展示
          post: true, // 是否作为参数
          value: '', // 值  状态此处设置默认值
          name: '记录托盘', // 字段名称
          type: 'select',

          enumsName: 'YES_NO',
          options: { // element组件相关属性
            placeholder: '请输入记录托盘',
            readonly: false,
            clearable: false,
            style: {
              width: '250px',
            },
          },
          rules: { rulesName: [] },
        },
        {
          span: 3,
          code: 'maxLpns', // 传递数据参数
          show: true, // 是否展示
          post: true, // 是否作为参数
          value: '', // 值
          name: '最大托盘数', // 字段名称
          prop: '', // rule prop
          type: 'inputNumberPositive', // inputNumberPositive 正整数

          options: { // element组件相关属性
            placeholder: '请输入最大托盘数',
            readonly: false,
            loading: false,
            min: 0,
            max: 9999,
            step: 1,
            precision: 0,
            style: {
              width: '250px',
            },
          },
          rules: { rulesName: [] },
        },
        {
          span: 3,
          code: 'maxSkus', // 传递数据参数
          show: true, // 是否展示
          post: true, // 是否作为参数
          value: '', // 值
          name: '最大混品数', // 字段名称
          prop: '', // rule prop
          type: 'inputNumberPositive', // inputNumberPositive 正整数

          options: { // element组件相关属性
            placeholder: '请输入最大混品数',
            readonly: false,
            loading: false,
            min: 0,
            max: 9999,
            step: 1,
            precision: 0,
            style: {
              width: '250px',
            },
          },
          rules: { rulesName: [] },
        },
        {
          span: 3,
          code: 'maxLots', // 传递数据参数
          show: true, // 是否展示
          post: true, // 是否作为参数
          value: '', // 值
          name: '最大混批号数', // 字段名称
          prop: '', // rule prop
          type: 'inputNumberPositive', // inputNumberPositive 正整数

          options: { // element组件相关属性
            placeholder: '请输入最大混批号数',
            readonly: false,
            loading: false,
            min: 0,
            max: 9999,
            step: 1,
            precision: 0,
            style: {
              width: '250px',
            },
          },
          rules: { rulesName: [] },
        },
        {
          span: 3,
          code: 'checkDigit', // 传递数据参数
          show: true, // 是否展示
          post: true, // 是否作为参数
          value: '', // 值
          name: '校验码', // 字段名称
          prop: '', // rule prop
          type: 'input',

          options: { // element组件相关属性
            placeholder: '请输入校验码',
            readonly: true,
            loading: false,
            min: 0,
            max: 9999,
            step: 1,
            precision: 0,
            style: {
              width: '250px',
            },
          },
          rules: { rulesName: [] },
        },
        {
          span: 3,
          code: 'ingoreCapacity', // 传递数据参数
          show: true, // 是否展示
          post: true, // 是否作为参数
          value: '', // 值  状态此处设置默认值
          name: '忽略容量', // 字段名称
          type: 'select', // input 输入框 selectRemote 远程调用的筛选框

          enumsName: 'YES_NO',
          options: { // element组件相关属性
            placeholder: '请输入忽略容量',
            readonly: false,
            clearable: false,
            min: 0,
            max: 9999,
            step: 1,
            precision: 0,
            style: {
              width: '250px',
            },
          },
          rules: { rulesName: [] },
        },
        {
          span: 2,
          code: 'rplnIngoreCapacity', // 传递数据参数
          show: true, // 是否展示
          post: true, // 是否作为参数
          value: '', // 值  状态此处设置默认值
          name: '补货忽略容量', // 字段名称
          prop: '', // rule prop
          type: 'select',

          enumsName: 'YES_NO',
          options: { // element组件相关属性
            placeholder: '请输入补货忽略容量',
            readonly: false,
            clearable: false,
            min: 0,
            max: 9999,
            step: 1,
            precision: 0,
            style: {
              width: '250px',
            },
          },
          rules: { rulesName: [] },
        },
        {
          span: 3,
          code: 'operationSeq', // 传递数据参数
          show: true, // 是否展示
          post: true, // 是否作为参数
          value: '', // 值
          name: '作业顺序', // 字段名称
          prop: '', // rule prop

          type: 'inputNumberPositive', // inputNumberPositive 正整数
          options: { // element组件相关属性
            placeholder: '请输入作业顺序',
            readonly: false,
            loading: false,
            min: 0,
            max: 9999,
            step: 1,
            precision: 0,
            style: {
              width: '250px',
            },
          },
          rules: { rulesName: [] },
        },
        {
          span: 2,
          code: 'cycleCountSeq', // 传递数据参数
          show: true, // 是否展示
          post: true, // 是否作为参数
          value: '', // 值
          name: '盘点顺序', // 字段名称
          prop: '', // rule prop
          type: 'inputNumberPositive', // inputNumberPositive 正整数

          options: { // element组件相关属性
            placeholder: '请输入盘点顺序',
            readonly: false,
            loading: false,
            min: 0,
            max: 9999,
            step: 1,
            precision: 0,
            style: {
              width: '250px',
            },
          },
          rules: { rulesName: [] },
        },
        {
          span: 3,
          code: 'floor',
          show: true, // 是否展示
          post: true,
          name: '楼层',
          value: '',
          prop: '', // rule prop
          type: 'select',

          enumsName: 'floor',
          options: {
            placeholder: '请选择楼层',
            readonly: false,
            loading: false,
            clearable: true,
            min: 0,
            max: 9999,
            step: 1,
            precision: 0,
            style: {
              width: '250px',
            },
          },
          rules: {
            rulesName: [],
          },
        },
        {
          span: 2,
          code: 'aisleId',
          show: true,
          post: true,
          value: '',
          name: '巷道',
          prop: '',
          type: 'selectRemote',

          selectRemote: {
            method: 'POST',
            url: 'api/app/corm/list',
            params: {
              objectId: 'aisle',
              fields: ['id', 'code'],
              offset: 0,
              pageSize: 20,
              filters: [
                {
                  code: 'code',
                  id: 'aisle.code',
                  operator: 'like',
                  value: '',
                },
                {
                  code: 'status',
                  id: 'aisle.status',
                  operator: 'eq',
                  value: 'ENABLE',
                },
              ], // 过滤参数，远程搜索必须输入一个对象，query值会默认输入到第一个对象
            },
            optionsData: {
              attribute: {
                value: 'id', // 返回数据所需字段名称
                label: 'code',
                code: 'code',
              },
              data: [],
            },
          }, // selectRemote 远程调用属性配置
          rules: { rulesName: [] },
          options: {
            readonly: false,
            placeholder: '请选择库巷道',
            style: {
              width: '250px',
            },
          },
        },
        {
          span: 3,
          code: 'row', // 传递数据参数
          show: true, // 是否展示
          post: true, // 是否作为参数
          value: '', // 值
          name: '排', // 字段名称
          prop: '', // rule prop

          type: 'inputNumberPositive', // inputNumberPositive 正整数
          options: { // element组件相关属性
            placeholder: '请输入排',
            readonly: false,
            loading: false,
            min: 0,
            max: 9999,
            step: 1,
            precision: 0,
            style: {
              width: '250px',
            },
          },
          rules: { rulesName: [] },
        },
        {
          span: 3,
          code: 'col', // 传递数据参数
          show: true, // 是否展示
          post: true, // 是否作为参数
          value: '', // 值
          name: '列', // 字段名称
          prop: '', // rule prop
          type: 'inputNumberPositive', // inputNumberPositive 正整数

          options: { // element组件相关属性
            placeholder: '请输入列',
            readonly: false,
            loading: false,
            min: 0,
            max: 9999,
            step: 1,
            precision: 0,
            style: {
              width: '250px',
            },
          },
          rules: { rulesName: [] },
        },
        {
          span: 3,
          code: 'tier', // 传递数据参数
          show: true, // 是否展示
          post: true, // 是否作为参数
          value: '', // 值
          name: '层', // 字段名称
          prop: '', // rule prop
          type: 'inputNumberPositive', // inputNumberPositive 正整数

          options: { // element组件相关属性
            placeholder: '请输入层',
            readonly: false,
            loading: false,
            min: 0,
            max: 9999,
            step: 1,
            precision: 0,
            style: {
              width: '250px',
            },
          },
          rules: { rulesName: [] },
        },
      ],
    }],
  },
  apiInfo: {
    url: '/api/app/corm/update',
    method: 'POST',
    body: {
      objectId: 'location',
      params: {},
    },
  },
});
// 枚举获取方法
function findPickList(picklistCode) {
  return cyber.request({
    method: 'POST',
    url: '/api/app/picklist/value/list ',
    data: {
      picklistCode,
    },
  });
}
// 页面数据获取
function findData() {
  axios.all([
    findPickList('LOCATION_CLASS').then((res) => {
      if (res.success) {
        const list = [];
        Object.values(res.data)
          .forEach((item) => {
            const temp = {
              label: item.name,
              value: item.code,
            };
            list.push(temp);
          });
        // 做赋值处理
        enums.value.locationClass = list;
      } else {
        ElMessage.error('枚举获取失败');
      }
    }).catch(() => ElMessage.error('枚举获取失败')),
    findPickList('OPERATION_TYPE').then((res) => {
      if (res.success) {
        const list = [];
        Object.values(res.data)
          .forEach((item) => {
            const temp = {
              label: item.name,
              value: item.code,
            };
            list.push(temp);
          });
        // 做赋值处理
        enums.value.operationType = list;
      } else {
        ElMessage.error('枚举获取失败');
      }
    }).catch(() => ElMessage.error('枚举获取失败')),
    findPickList('FLOOR').then((res) => {
      if (res.success) {
        const list = [];
        Object.values(res.data)
          .forEach((item) => {
            const temp = {
              label: item.name,
              value: item.code,
            };
            list.push(temp);
          });
        // 做赋值处理
        enums.value.floor = list;
      } else {
        ElMessage.error('枚举获取失败');
      }
    }).catch(() => ElMessage.error('枚举获取失败')),
    findPickList('STATUS').then((res) => {
      if (res.success) {
        const list = [];
        Object.values(res.data)
          .forEach((item) => {
            const temp = {
              label: item.name,
              value: item.code,
            };
            list.push(temp);
          });
        // 做赋值处理
        enums.value.status = list;
      } else {
        ElMessage.error('枚举获取失败');
      }
    }).catch(() => ElMessage.error('枚举获取失败')),
    findPickList('YES_NO').then((res) => {
      if (res.success) {
        const list = [];
        Object.values(res.data)
          .forEach((item) => {
            const temp = {
              label: item.name,
              value: item.code,
            };
            list.push(temp);
          });
        // 做赋值处理
        enums.value.YES_NO = list;
      } else {
        ElMessage.error('枚举获取失败');
      }
    }).catch(() => ElMessage.error('枚举获取失败')),
  ])
    .then(() => {
      detail.value.reload();
    });
}
onMounted(() => {
  config.value.objectId = router.currentRoute.value.query.objectId;
  config.value.id = router.currentRoute.value.query.entity_id;
  findData();
});
</script>
